<!DOCTYPE html>
<html>
	<head>
	    <meta charset="utf-8">
	    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
	    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
	    <title>Hello APP</title>
	    <link rel="stylesheet" type="text/css" href="../../css/index.css" />
	</head>
	<style type="text/css">
		.warp{width: 100%;}

		#header{position:fixed;width: 100%;height: 148px;background: #FFFFFF;z-index: 99;left: 0;top: 0;}
		.search-box{width: 100%;height: 44px;background: #FFFFFF;align-items: center;justify-content: center;}
		.search-box .go-back{flex-shrink: 0;align-items:center;justify-content: center;padding: 0 8px 0 15px;}
		.search-box .go-back img{display: block;width: 22px;height: 22px;}
		.search-box .search{height: 30px;border-radius:16px;padding-left:34px;box-sizing: border-box;background: url(../../image/main0/search_bg.png) no-repeat left 9px center #F3F5F5;background-size: 17px;}
		.search-box .search input{font-size: 14px;line-height: 30px;}
		.search-box .search .del{width: 30px;height: 30px;align-items:center;justify-content: center;}
		.search-box .search .del img{width: 16px;height: 16px;opacity: 0.6;}
		.search-box .btn{flex-shrink: 0;padding: 0 15px;font-size: 15px;color: #4D4F50;}

		.shaixuan-box{height: 44px;align-items: center;background: #FFFFFF;}
		.shaixuan-box .shaixuan-one{align-items: center;line-height: 50px;align-items: center;justify-content: center;position: relative;}
		.shaixuan-box .shaixuan-one span{line-height: 50px;}
		.shaixuan-box .shaixuan-one.on .all{color: #FF9502;}
		.shaixuan-box .shaixuan-one img{width: 5px;height: 13px;margin-left: 5px;}
		.tapcss{background: #f5f5f5}

		.pinpai-box{width: 100%;background: #ffffff;padding:14px 15px;box-sizing: border-box;}
		.pinpai-box .pinpai-sel{width: 100%;background: #F4F4F4;border-radius: 18px;font-size: 13px;align-items: center;justify-content: center;height: 32px;}
		.pinpai-box .pinpai-sel .t{padding-right: 20px;background: red;background:url(../../image/main0/pinpai_down.png) no-repeat right top 2px;background-size: 12px;}

	</style>
	<body>
		<div id="vue" class="warp">

			<div id="header">
				<div class="search-box flex">
					<div class="go-back" tapmode onclick="backMenu(this);"><img src="../../image/main0/go_back.png"/></div>
					<div class="search flex1 flex">
						<input class="flex1" type="text" name="" id="keyword" value="" oninput="inputText()" placeholder="搜索关键词"/>
						<div class="del flex" tapdome onclick="closeSearch()" ><img src="../../image/main3/del-img.png"/></div>
					</div>
					<div class="btn" tapdome onclick="clickSearch()">搜索</div>
				</div>
				<div class="shaixuan-box flex">
					<div class="shaixuan-one flex flex1 on" data-type="zonghe" tapmode onclick="tabType(this)"><span class="all">综合</span></div>
					<div class="shaixuan-one flex flex1" data-type="price" tapmode onclick="tabType(this)">
						<span>价格</span>
						<img v-if="pType == 0" src="../../image/main0/shaixuan_0.png"/>
						<img v-if="pType == 1" src="../../image/main0/shaixuan_1.png"/>
						<img v-if="pType == 2" src="../../image/main0/shaixuan_2.png"/>
					</div>
					<div class="shaixuan-one flex flex1" data-type="buynum" tapmode onclick="tabType(this)">
						<span>销量</span>
						<img v-if="xType == 0" src="../../image/main0/shaixuan_0.png"/>
						<img v-if="xType == 1" src="../../image/main0/shaixuan_1.png"/>
						<img v-if="xType == 2" src="../../image/main0/shaixuan_2.png"/>
					</div>
					<div class="shaixuan-one flex flex1" data-type="pinnum" tapmode onclick="tabType(this)">
						<span>好评</span>
						<img v-if="hType == 0" src="../../image/main0/shaixuan_0.png"/>
						<img v-if="hType == 1" src="../../image/main0/shaixuan_1.png"/>
						<img v-if="hType == 2" src="../../image/main0/shaixuan_2.png"/>
					</div>
				</div>
				<div class="pinpai-box border-top">
					<div class="pinpai-sel flex" tapmode onclick="open_allpinpai()"><div class="t">品牌</div></div>
				</div>
			</div>


			<div id="zhanwei" style="width: 100%"></div>

			<!--全部商品-->
			<div class="tuijian-box" style="display:none;" :style="{ display:(Pdata ? '':'none')}">
				<div class="shop-list flex">
					<div class="shop-one" v-for="(item,key) in Pdata.listData" :data-id="item.sid" :data-type="item.htype" tapmode onclick="open_goods(this)">
					 	<div class="img-box bgpic" :style="{backgroundImage:'url('+item.image+')'}"></div>
						<div class="shop-info">
					 		<div class="name han_2" v-text="item.title"></div>
							<div class="price-box flex">
	                            <div class="price" v-text="'¥'+item.price"></div>
	                            <div class="p3" v-if="item.price_del" v-text="'¥' + item.price_del"></div>
	                            <div class="num-box flex1" v-text="'已售'+item.buy_nums"></div>
					 		</div>
					 	</div>
					</div>
				</div>
		    </div>

			<!--占位图-->
			<div class="nodata" style="display:none;" :style="{ display:(noData ? '':'none')}">
	            <img src="../../image/no_page/no_shop.png" />
	            <p>暂无商品</p>
	        </div>
			<!-- 底部 -->
	        <div class="bottom-box" :style="{ display:(loadingMsg ? '':'none')}">
	            <div class="msgbox" v-html="loadingMsg" style="color:#999;"></div>
	        </div>

		</div>
	</body>
</html>
<script type="text/javascript" src="../../script/base.min.js" id="loadjs" data-js="L/swiper.min,L/h-tool"></script>
<script type="text/javascript">
	var _top = lanYun.setHeader('header');
	define(function (require, exports, module) {

		//console.log(JSON.stringify(pageParam));
		var order = "" ; orderval = "" ; keyword = "";
		_page.getData = function(loading) {
			//console.log(pageParam.keyword);
			lanYun.getVueData({url:'home/getGoodsList',get:{page:lanYun.page,cateid:pageParam.id,order:order,orderval:orderval,keyword:keyword},cache:0,loading:loading},function(ret) {
				//console.log(JSON.stringify(ret));
			});
		};

		lanYun.newVue('#vue',{
			pType:0,xType:0,hType:0
		},function() {
			$('#zhanwei').height(_top);
			if(pageParam.keyword){
				$('#keyword').val(pageParam.keyword);
				keyword = pageParam.keyword;
			}
			_page.getData(2);
		});
		//滚动加载..
		new auiScroll({distance:200, listen:true},function(ret) {
			if($(window).scrollTop() < 2) ret.isToBottom = false;
			var d = ret.scrollTop / 208;
			if(!ret.isToBottom) return;
			_page.getData(0);
		});

		// 点击搜索
		clickSearch = function(){
			keyword = $('#keyword').val();
			lanYun.ajaxPageSta = 0; lanYun.page = 1;
			_page.getData(2);
		}

		//清空搜索
		closeSearch = function(){
			$('#keyword').val('');
			$('.del').hide();
		}

		//切换类型
		tabType = function (tis){
			var dst = tis.dataset;
			var px = lanYun.vue.pType;
			var xl = lanYun.vue.xType;
			var hp = lanYun.vue.hType;
			var arr = [ '' ,'DESC','ASC'];
			order = dst.type;
			if (dst.type == 'price') {
				$(tis).siblings().removeClass('on');
				lanYun.vue.xType = 0;
				lanYun.vue.hType = 0;
				px ++;
				px = px % 3;
				lanYun.vue.pType = px;
				orderval = arr[px];
			}else if(dst.type == 'buynum'){
				$(tis).siblings().removeClass('on');
				lanYun.vue.pType = 0;
				lanYun.vue.hType = 0;
				xl ++;
				xl = xl % 3;
				lanYun.vue.xType = xl;
				orderval = arr[xl];
			}else if(dst.type == 'pinnum'){
				$(tis).siblings().removeClass('on');
				lanYun.vue.xType = 0;
				lanYun.vue.pType = 0;
				hp ++;
				hp = hp % 3;
				lanYun.vue.hType = hp;
				orderval = arr[hp];
			}else if(dst.type == 'zonghe'){
				$(tis).addClass('on');
				lanYun.vue.xType = 0;
				lanYun.vue.pType = 0;
				lanYun.vue.hType = 0;
			}
			lanYun.ajaxPageSta = 0; lanYun.page = 1;
			_page.getData(2);
		}

		//页面关闭方法
		backMenu = function (tis){
			api.closeWin();
		}

		//输入事件
		inputText = function () {
			var keyword = $('#keyword').val();
			if(keyword.length > 0){
				$('.del').show();
			}else {
				$('.del').hide();
			}
		}

		//打开商品详情
		open_goods = function (tis) {
	        var dst = tis.dataset;
	        lanYun.openWin('goods/show', {
	            win:'none',
	            frameParam : dst,
	        });
	    }

		//打开全部品牌
		open_allpinpai = function (){
			lanYun.openWin('main0/all_pinpai.html', {
				title : '品牌列表'
			});
		}
	});

</script>
